<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Plaing with CSS3 transition</title>
  <link rel='stylesheet' href='css/css3flip.css' />

  <script src="http://lapfuggs.local/jsLibs/jQueryv1.9.1.js"></script>
  <script src="http://lapfuggs.local/jsLibs/myUtils/fuggsUtils.js"></script>

</head>
<body>

<header>
<h1>Getting Familiar with CSS3 Transition</h1>
</header>

<section id="game">
    <div id="cards">
        <div class="card">
            <div class="face front"></div>
            <div class="face back cardAK"></div>
        </div> <!-- .card -->
        <div class="card">
            <div class="face front"></div>
            <div class="face back cardAQ"></div>
        </div> <!-- .card -->
    </div> <!-- #cards -->
</section> <!-- #game -->


<footer>
Example of CSS3 Transition.
</footer>

<script>
$(function(){
    $("#cards").children().each(function(index) {
        // listen the click event on each card DIV element.
        $(this).click(function() {
            // add the class "card-flipped".
            // the browser will animate the styles between current state and card-flipped state.
            $(this).toggleClass("card-flipped");
        });
    });
});
</script>

</body>
</html>
